<template>
  <div class="attachment-demo">
    <section>
      <zui-attachment @fileSelect="onFileSelect" v-model="attachments" @attachmentClick="onAttachmentClick" />
    </section>
    <section>
      <h1>Readonly</h1>
      <zui-attachment @fileSelect="onFileSelect" v-model="attachments" readonly />
    </section>
    <section>
      <h1>Readonly empty</h1>
      <zui-attachment @fileSelect="onFileSelect" readonly />
    </section>
    <section>
      <h1>Disabled</h1>
      <zui-attachment @fileSelect="onFileSelect" v-model="attachments" disabled />
    </section>
    <section>
      <h1>max=1</h1>
      <zui-attachment @fileSelect="onFileSelect" v-model="attachments" :max="1" />
    </section>

    <section>
      <h1>Edit Actions</h1>
      <zui-attachment @fileSelect="onFileSelect" v-model="attachments" :max="5" :edit-actions="['add']" />
    </section>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const attachments = ref([{ name: '附件.txt' }, { name: '附件附件附件附件附件附件附件附件附件附件附件.txt' }])
function onFileSelect(file) {
  console.log(file)
}

function onAttachmentClick(a) {
  console.log('a :>> ', a)
}
</script>

<style lang="scss" scoped>
.attachment-demo {
  section {
    margin-top: 8px;
    padding: 20px;
    background-color: #ffffff;
    h1 {
      line-height: 32px;
      font-weight: bold;
    }
  }
}
</style>
